<template>
    <view class="container">
        <view class="to-home" @click="toTask">
            <image :src="iconUrl+'返回首页.png'"></image>
        </view>
        <!-- <view>
             <text style="color:blue">发布任务</text>
        </view>
        <u-line color="blue" /> -->
        <u-form :model="form" ref="uForm">
            <view class="form-row">
                <view class="row-label">
                    <text>任务名称:</text>
                </view>
                <u-form-item prop="projectName">
                    <u-input v-model="form.projectName" maxlength="20" placeholder="6-20字" type="input" border="true"/>
                </u-form-item>
            </view>

            <view class="form-row">
                <view class="row-label">
                    <text decode="true">用工周期:</text>
                </view>
                <view>
                    <u-form-item>
                        <u-input v-model="form.projectDateValue" placeholder="请选择用工周期" type="select" :border="true"
                                 @click="dateShow = true"/>
                    </u-form-item>
                    <u-calendar v-model="dateShow" max-date="2050-12-31" mode="range"
                                @change="dateCallBack"></u-calendar>
                </view>
            </view>

            <view class="form-row">
                <view class="row-label">
                    <text decode="true">任务薪资:</text>
                </view>
                <view>
                    <u-form-item>
                        <u-input v-model="form.salaryValue" placeholder="请选择任务薪资" type="select" :border="true"
                                 @click="salaryShow = true"/>
                    </u-form-item>
                    <u-popup v-model="salaryShow" mode="bottom" width="500rpx" height="160px">
                        <view class="m-popup-top">
                            <view>
                                <text @click='salaryShow=false' style="margin-left:20rpx;color:#928e8e">取消</text>
                            </view>
                            <view>
                                <text style="color:#928e8e;font-weight:bold">任务薪资</text>
                            </view>
                            <view>
                                <text @click='salaryCallBack' style="margin-right:20rpx;color:blue;">确定</text>
                            </view>
                        </view>
                        <view class="m-popup-body">
                            <view class="body-btn">

                                <u-button shape="circle" @click="switchUnit('月')" :type="month"> 月</u-button>
                            </view>
                            <view class="body-btn">
                                <u-button shape="circle" @click="switchUnit('小时')" :type="hour"> 小时</u-button>
                            </view>
                            <view class="body-btn">
                                <u-button shape="circle" @click="switchUnit('次')" :type="time"> 次</u-button>
                            </view>
                            <view class="body-btn">
                                <u-button shape="circle" @click="switchUnit('个')" :type="entries"> 个</u-button>
                            </view>
                            <view class="body-btn">
                                <u-button shape="circle" @click="switchUnit('件')" :type="piece"> 件</u-button>
                            </view>
                        </view>
                        <u-line color="#F1F1F1F1"/>
                        <view class="m-popup-bottom">
                            <view>
                                <u-input v-model="salaryStartValue" type="text" input-align="center" placeholder=" "/>
                            </view>
                            <view>
                                <text>\t~\t</text>
                            </view>
                            <view>
                                <u-input v-model="salaryEndValue" type="text" input-align="center" placeholder=" "/>
                            </view>
                            <view>
                                <text>/{{unit}}</text>
                            </view>
                        </view>
                    </u-popup>
                </view>
            </view>

            <view class="form-row">
                <view class="row-label">
                    <text decode="true">结算周期:</text>
                </view>
                <view>
                    <u-form-item>
                        <input type="hidden" v-show="false" v-model="form.salaryType">
                        <u-input v-model="salaryTypeValue" placeholder="请选择结算周期" type="select" :border="true"
                                 @click="settleShow = true"/>
                    </u-form-item>
                    <u-action-sheet :list="salaryTypeOptions" v-model="settleShow"
                                    @click="salaryTypeCallBack"></u-action-sheet>
                </view>
            </view>

            <view class="form-row">
                <view class="row-label">
                    <text decode="true">用工性别:</text>
                </view>
                <view>
                    <u-form-item>
                        <input type="hidden" v-show="false" v-model="form.sex">
                        <u-input v-model="sexValue" placeholder="请选择用工性别" type="select" :border="true"
                                 @click="sexShow = true"/>
                    </u-form-item>
                    <u-action-sheet :list="sexOptions" v-model="sexShow" @click="sexCallBack"></u-action-sheet>
                </view>
            </view>

            <view class="form-row">
                <view class="row-label">
                    <text decode="true">用工年龄:</text>
                </view>
                <view>
                    <u-form-item>
                        <u-input v-model="form.age" placeholder="请选择用工年龄" type="select" :border="true"
                                 @click="ageShow = true"/>
                    </u-form-item>
                    <u-select mode="mutil-column" :list="ageList" v-model="ageShow" @confirm="ageCallBack"></u-select>
                </view>
            </view>

            <view class="form-row">
                <view class="row-label">
                    <text decode="true">用工学历:</text>
                </view>
                <view>
                    <u-form-item>
                        <input type="hidden" v-show="false" v-model="form.education">
                        <u-input v-model="eduValue" placeholder="请选择用工学历" type="select" :border="true"
                                 @click="eduShow = true"/>
                    </u-form-item>
                    <u-action-sheet :list="educationOptions" v-model="eduShow" @click="eduCallBack"></u-action-sheet>
                </view>
            </view>

            <view class="form-row">
                <view class="row-label">
                    <text decode="true">工作地点:</text>
                </view>
                <view>
                    <u-form-item>
                        <u-input v-model="form.workAddr" placeholder="请选择工作地点" type="select" :border="true"
                                 @click="addressShow = true"/>
                    </u-form-item>
                    <u-select v-model="addressShow" mode="mutil-column-auto" :list="addressList"
                              @confirm="addressCallBack"></u-select>
                </view>
            </view>

            <view class="task-desc">
                <view>任务描述</view>
                <div class="divider"></div>
                <view class="title-desc">【工作内容】</view>
                <view class="form-row-text-area">
                    <view>
                        <u-form-item prop="workDesc">
                            <u-input maxlength="200" v-model="form.workDesc" placeholder="请填写工作内容 (10-200字)"
                                     type="textarea" :border="false"/>
                        </u-form-item>
                    </view>
                </view>
                <view class="title-desc">【工作时间】</view>
                <view class="form-row-text-area">
                    <view>
                        <u-form-item prop="workDate">
                            <u-input maxlength="100" v-model="form.workDate" placeholder="请填写提供服务的时间(10-100字)"
                                     type="textarea" :border="false"/>
                        </u-form-item>
                    </view>
                </view>
                <view class="title-desc">【工资说明】</view>
                <view class="form-row-text-area">
                    <view>
                        <u-form-item prop="salaryDesc">
                            <u-input maxlength="200" v-model="form.salaryDesc" placeholder="请填写工资说明(10-200字)"
                                     type="textarea" :border="false"/>
                        </u-form-item>
                    </view>
                </view>
            </view>

            <view class="publish-btn">
                <u-button type="primary" @click="submitForm">发布</u-button>
            </view>
        </u-form>
    </view>
</template>

<script>
    // 引入省市区json文件
    import provinceJson from '@/static/json/province.json'

    export default {
        data() {
            return {
                iconUrl: this.iconUrl,
                form: {
                    merId: '',
                    projectName: '',
                    projectDateValue: '',
                    salaryValue: '',
                    salaryType: '',
                    sex: '',
                    age: '',
                    education: '',
                    workDesc: '',
                    workDate: '',
                    salaryDesc: '',
                },
                projectName: '',
                sexValue: '',
                salaryStartValue: '',
                salaryEndValue: '',
                salaryTypeValue: '',
                eduValue: '',
                dateShow: false,
                sexShow: false,
                salaryShow: false,
                settleShow: false,
                ageShow: false,
                eduShow: false,
                addressShow: false,
                unit: '日',
                month: '',
                hour: '',
                time: '',
                entries: '',
                piece: '',
                salaryTypeOptions: [],
                educationOptions: [],
                sexOptions: [],
                ageList: [],
                addressList: [],

            }
        },
        onLoad() {
            this.ageList[0] = [{label: '18'}, {label: '19'}, {label: '20'}, {label: '21'}, {label: '22'}, {label: '23'}, {label: '24'}
                , {label: '25'}, {label: '26'}, {label: '27'}, {label: '28'}, {label: '29'}, {label: '30'}, {label: '31'}, {label: '32'}, {label: '33'}
                , {label: '34'}, {label: '35'}, {label: '36'}, {label: '37'}, {label: '38'}, {label: '39'}, {label: '40'}, {label: '41'}, {label: '42'}
                , {label: '43'}, {label: '44'}, {label: '45'}, {label: '46'}, {label: '47'}, {label: '48'}, {label: '49'}, {label: '50'}, {label: '51'}
                , {label: '52'}, {label: '53'}, {label: '54'}, {label: '55'}, {label: '56'}, {label: '57'}, {label: '58'}, {label: '59'}, {label: '60'}
                , {label: '61'}, {label: '62'}, {label: '63'}, {label: '64'}, {label: '65'}, {label: '66'}, {label: '67'}, {label: '68'}, {label: '69'}, {label: '70'}];
            this.ageList[1] = this.ageList[0];
            this.addressList = provinceJson;
            this.$getDictList('salary_type', {
                success: (cts) => {
                    this.salaryTypeOptions = cts.data;
                    this.salaryTypeOptions.forEach((salaryTypeOption) => {
                        salaryTypeOption.text = salaryTypeOption.dictLabel;
                    });
                }
            });
            this.$getDictList('education', {
                success: (cts) => {
                    this.educationOptions = cts.data;
                    this.educationOptions.forEach((educationOption) => {
                        educationOption.text = educationOption.dictLabel;
                    });
                }
            });
            this.$getDictList('sex', {
                success: (cts) => {
                    this.sexOptions = cts.data;
                    this.sexOptions.forEach((sexOption) => {
                        sexOption.text = sexOption.dictLabel;
                    });
                }
            });
        },
        methods: {

            toTask() {
                uni.switchTab({
                    url: '/pages/task/merIndex'
                });
            },
            //提交表单
            submitForm() {
                this.form.merId = uni.getStorageSync('mer_id');

                if (this.form.projectName.length < 6) {
                    uni.showToast({title: "任务名称长度不能小于6个字符", type: "error", icon: 'none'});
                    return;
                }
                if (this.form.projectDateValue.length === 0) {
                    uni.showToast({title: "用工周期不能为空", type: "error", icon: 'none'});
                    return;
                }
                if (this.salaryStartValue.length === 0 || this.salaryEndValue.length === 0) {
                    uni.showToast({title: "任务薪资范围不能为空", type: "error", icon: 'none'});
                    return;
                }
                if (this.form.salaryType.length === 0) {
                    uni.showToast({title: "结算周期不能为空", type: "error", icon: 'none'});
                    return;
                }
                if (this.form.sex.length === 0) {
                    uni.showToast({title: "用工性别不能为空", type: "error", icon: 'none'});
                    return;
                }
                if (this.form.age.length === 0) {
                    uni.showToast({title: "用工年龄不能为空", type: "error", icon: 'none'});
                    return;
                }
                if (this.form.education.length === 0) {
                    uni.showToast({title: "用工学历不能为空", type: "error", icon: 'none'});
                    return;
                }
                if (this.form.workAddr.length === 0) {
                    uni.showToast({title: "工作地点不能为空", type: "error", icon: 'none'});
                    return;
                }
                if (this.form.workDesc.length < 10) {
                    uni.showToast({title: "工作内容长度不能小于10个字符", type: "error", icon: 'none'});
                    return;
                }
                if (this.form.workDate.length < 10) {
                    uni.showToast({title: "工作时间长度不能小于10个字符", type: "error", icon: 'none'});
                    return;
                }
                if (this.form.salaryDesc.length < 10) {
                    uni.showToast({title: "薪资说明长度不能小于10个字符", type: "error", icon: 'none'});
                    return;
                }
                this.$sendRequest({
                    url: '/api/wx/publishProject',
                    method: 'POST',
                    data: this.form,
                    success: (cts) => {
                        uni.showToast({
                            title: "任务已发布!",
                            type: "success",
                            icon: 'checkbox-mark'
                        });
                        uni.switchTab({
                            url: "/pages/task/merIndex"
                        });
                    }
                });
            },
            // 点击选择性别
            sexCallBack(index) {
                this.sexValue = this.sexOptions[index].text;
                this.form.sex = this.sexOptions[index].dictValue;
            },
            // 点击选择用工周期
            dateCallBack(e) {
                this.form.projectDateValue = e.startDate + ' 至 ' + e.endDate;
            },
            //点击选择任务薪资
            salaryCallBack() {
                this.salaryShow = false;
                this.form.salaryValue = this.salaryStartValue + "~" + this.salaryEndValue + '/' + this.unit;
            },
            //点击选择结算周期
            salaryTypeCallBack(index) {
                this.salaryTypeValue = this.salaryTypeOptions[index].text;
                this.form.salaryType = this.salaryTypeOptions[index].dictValue;
            },
            //点击获取年龄
            ageCallBack(e) {
                this.form.age = e[0].label + '岁-' + e[1].label + '岁';
            },
            //点击获取学历
            eduCallBack(index) {
                this.eduValue = this.educationOptions[index].text;
                this.form.education = this.educationOptions[index].dictValue;
            },
            //点击获取工作地点
            addressCallBack(e) {
                this.form.workAddr = e[0].label + "-" + e[1].label + "-" + e[2].label;
            },
            switchUnit(unit) {
                this.unit = unit;
                if (unit === '月') {
                    this.month = 'success'
                    this.hour = '';
                    this.time = '';
                    this.entries = '';
                    this.piece = '';
                }
                if (unit === '小时') {
                    this.month = ''
                    this.hour = 'success';
                    this.time = '';
                    this.entries = '';
                    this.piece = '';
                }
                if (unit === '次') {
                    this.month = ''
                    this.hour = '';
                    this.time = 'success';
                    this.entries = '';
                    this.piece = '';
                }
                if (unit === '个') {
                    this.month = ''
                    this.hour = '';
                    this.time = '';
                    this.entries = 'success';
                    this.piece = '';
                }
                if (unit === '件') {
                    this.month = ''
                    this.hour = '';
                    this.time = '';
                    this.entries = '';
                    this.piece = 'success';
                }
            }
        }
    }


</script>

<style lang="scss">
    page {
        background-color: #FFFFFF;
        position: relative;
        font-size: 28rpx;
    }
    .container{
        margin:20rpx 20rpx;
        .to-home{
            position: fixed;
            top:800rpx;
            right:5rpx;
            z-index:9999;
            image {
                width: 60rpx;
                height: 60rpx;
            }
        }
        .form-row{
            background-color: #F1F1F1;
            border-radius: 10rpx;
            margin: 30rpx 0;
            display: flex;

            .row-label {
                margin: 35rpx 0 20rpx 20rpx;
            }

            .u-input {
                width: 550rpx;
                background-color: #F1F1F1;
                align-items: center;
            }
            .u-input--border.data-v-25cf517a{
                border: 0px !important;
            }

            .u-input__input.data-v-25cf517a {
                font-size: 22rpx;
                margin-top: 0rpx;
                text-align: right;
            }
            .m-popup-top{
                font-size: 16rpx;
                height: 50rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .m-popup-body{
                display: flex;
                margin:20rpx 20rpx;
                flex-wrap: wrap;
                justify-content: center;
                .u-size-default.data-v-69dd55d4{
                    background-color: #F1F1F1;
                    width:60rpx;
                    height: 40rpx;
                    font-size:22rpx;
                }
                .body-btn{
                    margin-left:20rpx;
                }

            }
            .m-popup-bottom{
                margin:40rpx 20rpx;
                display: flex;
                justify-content: center;
                .u-input{
                    margin-right: 15rpx;
                    width:120rpx;
                    border-radius: 10rpx;
                    height: 58rpx;
                    background-color: #F1F1F1;
                    align-items: center;
                }
                text{
                    display: block;
                    margin-top: 10rpx ;
                    font-size: 24rpx;
                }

            }
        }
        .task-desc{
            padding: 20rpx 0 20rpx 20rpx;
            background-color: #F1F1F1;
            border-radius: 10rpx;

        }
        .divider {
            width: 650rpx;
            /*height:10rpx;*/
            border: 1rpx solid #E0DEDE;
            margin: 20rpx 0rpx 20rpx 0rpx;
        }
        .title-desc{
            margin-top: 20rpx;
        }

        .form-row-text-area{
            display: flex;
            margin-top: 20rpx;
            font-size:24rpx;
            align-items: center;
            .u-input{
                margin-left: 15rpx;
                width:660rpx;
                border-radius: 10rpx;
                /*height: 200rpx;*/
                background-color: #F1F1F1;
            }
            .u-input__textarea.data-v-25cf517a{
                font-size: 22rpx;
                height: 200rpx !important;
            }
        }
        .u-input--border.data-v-25cf517a{
            border: 0rpx !important;
        }

        .publish-btn{
            margin: 20rpx 80rpx 10rpx 20rpx;
            width: 670rpx;
            border-radius: 50rpx;
        }
        .u-icon__icon.data-v-72dbdbb4 {
            top: -6rpx !important;
        }

    }

</style>
